<!--
 * @Description: 
 * @Version: 1.0
 * @Author: wenbin
 * @Date: 2021-06-22 11:33:00
 * @LastEditors: wenbin
 * @LastEditTime: 2021-06-22 15:04:07
 * @FilePath: /magus-plugin/examples/views/taskList/page.vue
 * Copyright (C) 2021 wenbin. All rights reserved.
-->
<template>
  <div class="task-list">
    <el-table
      :data="tableData"
      height="100%"
      size="mini"
      border
      style="width: 100%"
    >
      <el-table-column prop="taskId" label="任务ID" min-width="180">
      </el-table-column>
      <el-table-column prop="title" label="任务名称" min-width="180">
      </el-table-column>
      <el-table-column prop="progress" label="任务进度" min-width="180">
        <template slot-scope="scope">
          <el-progress
            v-if="scope.row.progress"
            :text-inside="true"
            :stroke-width="15"
            :percentage="scope.row.progress"
          ></el-progress>
          <div v-else class="loading">
            <span></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="msg" min-width="180" label="任务详情">
      </el-table-column>
      <el-table-column min-width="80" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            title="删除"
            @click="deleteList(scope.row)"
            icon="magusdip-iconfont magusdipshanchu"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "page",
  components: {},
  data() {
    return {
      tableData: [],
    };
  },
  computed: {},
  watch: {},
  methods: {
    async getTask() {
      this.tableData = [];
      let mlinkDataLocal = localStorage.getItem("mlinkData");
      if (mlinkDataLocal) {
        let taskList = JSON.parse(mlinkDataLocal);
        for (var i in taskList) {
          this.tableData.push(taskList[i]);
        }
      }
    },
    goRequest() {
      this.tableData.forEach((item) => {
        if (item.code !== 200) {
          this.$magusCloudApi.apiConfig.get(
            item.url,
            {},
            { "Mlink-URL": item.MlinkUrl }
          );
        }
      });
    },
    resetSetItem(key, newVal) {
      if (key === "taskChange") {
        // 创建一个StorageEvent事件
        var newStorageEvent = document.createEvent("StorageEvent");
        const storage = {
          setTaskItem: function(k, val) {
            sessionStorage.setItem(k, val);

            // 初始化创建的事件
            newStorageEvent.initStorageEvent(
              "setTaskItem",
              false,
              false,
              k,
              null,
              val,
              null,
              null
            );

            // 派发对象
            window.dispatchEvent(newStorageEvent);
          },
        };
        return storage.setTaskItem(key, newVal);
      }
    },
    deleteList(datas) {
      let mlinkDataLocal = localStorage.getItem("mlinkData");
      if (mlinkDataLocal) {
        let taskList = JSON.parse(mlinkDataLocal);
        delete taskList[datas.taskId];
        this.$magusCloudApi.catchUtil.setLocalItem(
          "mlinkData",
          JSON.stringify(taskList)
        );
        this.resetSetItem("taskChange", JSON.stringify(taskList));
        this.getTask();
      }
    },
  },
  created() {},
  async mounted() {
    await this.getTask();
    this.goRequest();
    window.addEventListener("setTaskItem", () => {
      this.getTask();
    });
  },
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="scss" scoped>
.task-list {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 15px;
  width: 100%;
  height: 100%;
}

.loading {
  width: 100%;
  height: 15px;
  border-radius: 100px;
  position: relative;
  background: #e5e5e5;
  overflow: hidden;
}
.loading span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 100px;
  background: #30429b;
  -webkit-animation: changePosition 4s linear infinite;
}
@-webkit-keyframes changePosition {
  0% {
    -webkit-transform: translate(-250px);
  }
  50% {
    -webkit-transform: translate(0);
  }
  100% {
    -webkit-transform: translate(250px);
  }
}
</style>
